<template>
  <div class="top-search">
    <div class="checkout-group">
      <div class="row">
        <el-checkbox v-model="formData.xm" label="区县名" />
        <el-checkbox
          v-model="formData.xj"
          label="区县界"
          @change="handleShowGeoJson"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as L from 'leaflet'
import { createTileLayer } from '@quickearth/leaflet'
import { predefinedImageTiles } from '@quickearth/core'
import yulinGeojson from '@/assets/data/yulin1.json'
import yulinSideGeojson from '@/assets/data/yulin-side.json'
import { useTrafficStore } from '@/pages/traffic/store/store'

const trafficStore = useTrafficStore()

const pointTypeList = computed(() => trafficStore.pointTypeList)

const formData = reactive({
  mapStyle: computed({
    get: () => trafficStore.mapStyle,
    set(newValue) {
      trafficStore.mapStyle = newValue
    }
  }),
  type: [],
  xm: computed({
    get: () => trafficStore.componentsVisible.xm,
    set(newValue) {
      trafficStore.componentsVisible.xm = newValue
    }
  }),
  xj: false,
  pointType: computed({
    get: () => trafficStore.pointType,
    set(newValue) {
      trafficStore.pointType = newValue
    }
  }),
  showType: computed({
    get: () => trafficStore.showType,
    set(newValue) {
      trafficStore.showType = newValue
    }
  }),
  showLineName: computed({
    get: () => trafficStore.componentsVisible.showLineName,
    set(newValue) {
      trafficStore.componentsVisible.showLineName = newValue
    }
  }),
  showCamera: computed({
    get: () => trafficStore.componentsVisible.showCamera,
    set(newValue) {
      trafficStore.componentsVisible.showCamera = newValue
    }
  })
})

const colorTransparentMapStyle = {
  fillColor: '#Fff',
  weight: 4,
  opacity: 1,
  color: '#06FEFF',
  fillOpacity: 0
}
const loadQhWhite = () => {
  useEventBus('handleRemoveLayer').emit('qhWhite')
  useEventBus('handleAddLayer').emit(
    L.geoJSON(yulinSideGeojson, {
      style: colorTransparentMapStyle
    }),
    'qhWhite'
  )
}
const handleShowGeoJson = val => {
  if (val) {
    useEventBus('handleRemoveLayer').emit('yulinSideWhite')
    useEventBus('handleAddLayer').emit(
      L.geoJSON(yulinGeojson, {
        style(feature) {
          return {
            fillColor: '#Fff',
            weight: 2,
            opacity: 1,
            color: '#7f7f7f',
            fillOpacity: 0
          }
        }
      }),
      'yulinWhite'
    )
  } else {
    useEventBus('handleRemoveLayer').emit('yulinWhite')
    useEventBus('handleAddLayer').emit(
      L.geoJSON(yulinSideGeojson, {
        style(feature) {
          return {
            fillColor: '#Fff',
            weight: 2,
            opacity: 1,
            color: '#7f7f7f',
            fillOpacity: 0
          }
        }
      }),
      'yulinSideWhite'
    )
  }
  loadQhWhite()
}

const handleChangeShowType = () => {
  useEventBus('handleInitNewTrafficLineMap').emit()
}

onMounted(() => {
  handleShowGeoJson(formData.xj)
  // trafficStore.componentsVisible.xm = true
})
</script>

<style lang="scss" scoped>
.top-search {
  position: absolute;
  top: 20px;
  right: 31px;
  width: 217px;
  background: rgba(0, 13, 35, 0.76);
  border-radius: 4px 4px 4px 4px;
  z-index: 1200;
  transition: all 0.4s;
  padding: 0 14px;
  box-sizing: border-box;
  color: #fff;
  box-shadow: 0px 0px 6px 1px rgba(0, 204, 255, 0.77),
    inset 0px 0px 14px 1px #00ccff;
  border: 1px solid #2c96cd;
  .select-group {
    width: 190px;
    height: 34px;
    border: 1px solid rgba(2, 19, 43, 0.69);
    background: rgba(2, 19, 43, 0.69);
    box-shadow: inset 0px 0px 6px 1px #00b9ff;
    border-radius: 4px 4px 4px 4px;
    display: flex;
    .line {
      width: 1px;
      height: 18px;
      margin-top: 8px;
      opacity: 0.29;
    }
  }
  .checkout-group {
    // margin-top: 8px;
    .row {
      height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el-checkbox {
        width: 60%;
      }
      .el-checkbox:last-child {
        width: 30%;
      }
    }
  }
  .interval {
    display: inline-block;
    padding-bottom: 3px;
    margin-right: 10px;
  }

  .el-checkbox {
    --el-checkbox-text-color: #fff;
    margin-right: 10px;

    .input-detail {
      display: flex;
      align-items: center;
      justify-content: center;

      :deep(.el-input-number) {
        width: 43px;
        height: 22px;
        margin: 0 5px;

        .el-input-number__decrease,
        .el-input-number__increase {
          display: none;
        }

        .el-input__wrapper {
          padding: 0;
        }
      }
    }
  }

  .el-radio {
    --el-radio-text-color: #fff;
    margin-right: 10px;
  }
  .shi,
  .qu {
    cursor: pointer;
  }
}
</style>
